<template>
    <div>

        <divider v-if="voteCountShow">当前票数</divider>

        <group v-if="voteCountShow" v-for="(value, key) in voteCountMap" :key="key + 100" :title="key + '号作品'">
            <flexbox>
                <flexbox-item :span="8">
                    <x-progress :percent="value * 100 / voteCountTotal" :show-cancel="false"></x-progress>
                </flexbox-item>
                <flexbox-item :span="1">

                </flexbox-item>
                <flexbox-item>
                    <countup :start-val="1" :end-val="value" :duration="2"></countup>
                </flexbox-item>
                <flexbox-item :span="1">
                    <span>票</span>
                </flexbox-item>
            </flexbox>

        </group>

        <divider>参赛作品</divider>

        <group :title="(index+1) + '号作品'" v-for="(entry, index) in entryData" :key="index"
               style="margin-bottom: 15px">
            <card>
                <swiper slot="header" :list="swiperList[index]"></swiper>
                <!--<img slot="header" src="http://placeholder.qiniudn.com/640x300" style="width:100%;display:block;">-->
                <div slot="content" class="card-padding">
                    <p style="color:#999;font-size:17px;">作品简介</p>
                    <p style="font-size:16px;line-height:1.2;margin-top: 10px">{{ entryData[index].enrollModel.intro
                        }}</p>
                </div>
            </card>
        </group>


        <divider v-if="voteAreaShow">投票区域</divider>

        <checklist :options="inlineDescList" v-model="inlineDescListValue" v-if="voteAreaShow" :max=1></checklist>

        <x-button type="primary" v-if="voteAreaShow" style="width: 80%;margin-top: 15px" @click.native="voteSubmit">提交
        </x-button>


    </div>
</template>

<script>
    /* eslint-disable */

    import {
        Card,
        Group,
        Divider,
        Swiper,
        SwiperItem,
        Checklist,
        XProgress,
        Countup,
        Flexbox,
        FlexboxItem,
        XButton
    } from 'vux'
    import server from '../config/server'
    import * as util from '../config/util'

    export default {
        name: 'vote',
        data () {
            return {
                swiperList: [],
                entryData: [],
                inlineDescList: [],
                inlineDescListValue: [],
                voteAreaShow: false,
                voteCountMap: {},
                voteCountTotal: 0,
                voteCountShow: false
            }
        },
        components: {
            Card,
            Group,
            Divider,
            Swiper,
            SwiperItem,
            Checklist,
            XProgress,
            Countup,
            Flexbox,
            FlexboxItem,
            XButton
        },
        beforeRouteEnter (to, from, next) {
            next(vm => {
                // 通过 `vm` 访问组件实例
                vm.$http.get(server.wechatAuthCheck).then(response => {
                    switch (response.data.errorCode) {
                        case 0:

                            break
                        case 10001:
                            var url = util.constructWechatAuth(encodeURIComponent(window.location.href))
                            window.location.href = url
                            break
                        default:
                            window.location.href = '/'
                            break

                    }

                })
            })
        },
        methods: {
            voteSubmit () {

                if (this.inlineDescListValue.length !== 1) {
                    this.$vux.alert.show({
                        title: '错误',
                        content: '只能对一个作品进行投票喔！'
                    })
                    return
                }

                this.$http({
                    method: 'post',
                    url: server.voteSubmit,
                    params: {
                        entryId: this.inlineDescListValue[0],
                    }
                }).then((res) => {
                    var data = res.data.data

                    if (res.data.errorCode === 0) {
                        this.$vux.alert.show({
                            title: '提示',
                            content: '投票成功，感谢您对比赛的支持！',
                            onHide () {
                                location.reload()
                            }
                        })
                    } else {
                        this.$vux.alert.show({
                            title: '错误',
                            content: res.data.message,
                            onHide () {
                                location.reload()
                            }
                        })
                    }
                })
            }
        },
        mounted () {
            this.$vux.loading.show({
                text: '加载中'
            })

            var _this = this
            this.$wechat.ready(function () {
                _this.$wechat.onMenuShareAppMessage({
                    title: '摄影大赛', // 分享标题
                    desc: '快来帮我投上宝贵的一票吧！', // 分享描述
                    link: 'http://activity.maxstudiozhuhai.com/#/vote/1', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'http://p7ewj3tpm.bkt.clouddn.com/shareIcon.jpg', // 分享图标
                    type: '', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {

                    },
                    cancel: function () {

                    }
                })

                _this.$wechat.onMenuShareTimeline({
                    title: '摄影大赛：快来帮我投上宝贵的一票吧！', // 分享标题
                    link: 'http://activity.maxstudiozhuhai.com/#/vote/1', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'http://p7ewj3tpm.bkt.clouddn.com/shareIcon.jpg', // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                })
            })

            this.$http.get(server.entryInfo, {params: {activityId: this.$route.params.activityId}}).then(response => {
                if (response.data.errorCode === 0) {

                    var data = response.data.data
                    this.entryData = data

                    for (var i = 0; i < data.length; i++) {
                        var imgs = data[i].enrollModel.imgHash

                        // 构造swiper图片列表
                        var temp = []
                        for (var j = 0; j < imgs.length; j++) {
                            temp.push({
                                url: 'javascript:',
                                img: server.qiniu + imgs[j],
                                title: data[i].enrollModel.author
                            })
                        }
                        this.swiperList.push(temp)

                        // 构造投票列表
                        this.inlineDescList.push({
                            key: data[i].id,
//                            value: data[i].entry_no + '号作品',
                            value: (i+1) + '号作品',
                            inlineDesc: data[i].enrollModel.author
                        })
                    }

                    this.$http.get(server.voteCheck, {params: {activityId: this.$route.params.activityId}}).then(response => {
                        this.$vux.loading.hide()

                        if (response.data.errorCode === 0) {
                            var data = response.data.data

                            if (data) {
                                this.voteCountShow = true
                                this.voteCountTotal = data.totalCount
                                this.voteCountMap = data.voteCount
                            } else {
                                this.voteAreaShow = true
                                this.$vux.alert.show({
                                    title: '提示',
                                    content: '每人只能投票一次，请勿恶意刷票，否则取消参赛资格'
                                })

                            }

                        }

                    })

                }

            })

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
